import { Modal, Select, Tree, Button } from 'antd'
import React, { useEffect, useState, useImperativeHandle, useRef } from 'react'
import AuthTreeSelect from './TreeSelect'
import '../styles/auth.module.css'
import { useMainContext } from '@contexts/MainContext'
const DetailAdd = ({
  detailRef,
  roleDataList,
  addVisible = false,
  onAddOk,
  onAddCancel,
  roleId,
  setRoleId,
  // checkData, 树
  unitCodes,
  setUnitCodes
}) => {
  const TreeSelectRef = useRef()
  const { isButtomShow } = useMainContext()

  //机构数据
  const [unitData, setUnitData] = useState([])
  //机构变动事件
  const [label, setLabel] = useState(undefined)
  const onUnitChange = (value, option) => {
    setUnitCodes(value)
    const labels = option.map(item => item.label)
    setLabel(labels.length ? labels.join() : '')
  }

  const onRoleChange = (e) => {
    setRoleId(e)
  }

  // useEffect(() => {
  //   if (addVisible) {
  //     if (roleId) {
  //       //编辑
  //       // TreeSelectRef.current.setValue(checkData) 树
  //     } else {
  //       // TreeSelectRef.current.setValue([]) 树
  //     }
  //   }
  // }, [addVisible])

  // 暴露给外部组件的方法
  useImperativeHandle(detailRef, () => ({
    getUnitData: () => unitData,
    setUnitData: (data) => setUnitData(data),
    // getUnitLabel: () => TreeSelectRef.current.getLabel(), 树
    getUnitLabel: () => label,
    setUnitLabel: (val) => setLabel(val),
  }))

  const footer = () => {
    const list = [
      <Button key="back" onClick={onAddCancel}>
        取消
      </Button>,
      <Button
        key="submit"
        type="primary"
        onClick={() =>
          // onAddOk({ roleId: roleId, authUnitCodeList: TreeSelectRef.current.getValue(), }) 树
          onAddOk({ roleId: roleId, authUnitCodeList: unitCodes, })
        }
      >
        确定选择
      </Button>
    ]
    return list
  }

  // filterTreeNode, //是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值
  const filterTreeNode = (inputValue, treeNode) => {
    return treeNode.key === inputValue || treeNode.title?.startsWith(inputValue)
  }
  return (
    <>
      <Modal
        title="角色机构权限新增"
        centered
        open={addVisible}
        width={600}
        onCancel={onAddCancel}
        maskClosable= {false}
        onOk={() =>
          // onAddOk({ roleId: roleId, authUnitCodeList: TreeSelectRef.current.getValue() }) 树
          onAddOk({ roleId: roleId, authUnitCodeList: unitCodes })
        }
        footer={footer()}
      >
        <div>
          <div>
            <label>角色权限：</label>
            <Select
              style={{ width: '80%' }}
              // labelInValue
              showSearch
              placeholder="请选择角色"
              optionFilterProp="children"
              value={roleId}
              onSelect={onRoleChange}
              filterOption={(input, option) =>
                option.children.toLowerCase()?.includes(input.toLowerCase())
              }
            >
              {roleDataList?.map((item, i) => {
                return (
                  <Select.Option index={i} key={i} value={item.roleId}>
                    {item.roleName}
                  </Select.Option>
                )
              })}
            </Select>
          </div>
          <br />
          <div>
            <label>机构权限：</label>
            <Select
              style={{ width: '80%' }}
              showSearch
              mode="multiple"
              value={unitCodes}
              placeholder="请选择机构"
              optionFilterProp="children"
              onChange={onUnitChange}
              filterOption={(input, option) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }
              options={unitData}
            />
            {/* 树<AuthTreeSelect
              TreeSelectRef={TreeSelectRef}
              treeSelectData={unitData}
              style={{ width: '80%' }}
              fieldNames={{ label: 'title', value: 'key', children: 'children' }}
              filterTreeNode={filterTreeNode}
            /> */}
          </div>
        </div>
      </Modal>
    </>
  )
}
export default DetailAdd
